16～69歳の視覚障がい者の 91.7% が
インターネットを利用しています。

視覚障がい者のための
Web アクセシビリティ
入門以前

2016年4月1日
障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）が施行されました。

ちなみにどこかで見たような 5 段階評価表があったりもします

視覚障がい者の Web 利用方法

全盲

主に音声読み上げソフトを利用

ロービジョン（昔は弱視と呼ばれた）

見え方や見えやすい条件に多様な個人差がある
Web 利用方法も様々

• 音声読み上げソフトを利用
• 配色・文字サイズ等を変更して利用（カスタム CSS 等）
• 画面拡大ソフトを利用
• 画面解像度を調整
• ディスプレイにレンズをあてて物理的に拡大

音声読み上げソフト

スクリーンリーダー

PC-Talker	141,040 円 (税込)	国内シェア 85.3%
JAWS	153,360 円 (税込)
NVDA	無料	オープンソース
ナレーター	Windows 標準付属	Ctrl + Win + Enter
VoiceOver	macOS, iOS 標準付属

音声ブラウザー

NetReader	30,240円 (税込)	要 PC-Talker
IBM Home Page Reader	販売終了	IE 6 まで
ALTAIR (アルティア)	無料	DL リンク切れ...

視覚障がい者を意識したマークアップ

• img 要素に alt 属性（代替テキスト）をつける
• ページの内容がわかるページタイトルをつける
• 1 つのページにコンテンツを詰め込み過ぎない
• サイト内検索機能を提供する
• フォームコントロール要素にラベルを付ける
• 意味のあるタグを使う（なんでもかんでも div にしない）
• 意味のあるリンクテキストにする（悪い例: “こちら”）
• すべての機能をキーボードから利用できるようにする
• 色を唯一の情報伝達手段にしない
  （例: エラーを赤で表現するだけでなくエラー的文言も出す）
• 前景と背景の間に十分なコントラストを提供する
• 勝手に動きだすコンテンツ（例: カルーセル）には
  止める手段を提供する
• 無限スクロールを使わない

もっとほしいひとへ

Web Content Accessibility Guidelines (WCAG) 2.0

パッと見ハードル高そうな印象を受けるけど文章は割と平易

ガイドライン 1.1 テキストによる代替: すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。

目次ぐらい目を通しても損にはならない

音声読み上げソフトを意識したマークアップ

こんなときどうしよう

1. アイコンボタンの意味を音声で説明したいけど画面には説明を出したくない
2. 見た目を派手にするためだけの要素を読み飛ばしてほしい
3. 「タブ」など HTML タグにない意味を要素に与えたい

1. アイコンボタンの意味を音声で説明したいけど画面には説明を出したくない

<button
  aria-label="お気に入りに追加"
  aria-describedby="favorite-button-description"
>
  <i class="mdi mdi-star"></i>
</button>
<p id="favorite-button-description" style="display: none;">
  選択されている項目をお気に入りに追加します
</p>

選択されている項目をお気に入りに追加します

2. 見た目を派手にするためだけの要素を読み上げてほしくない

<div aria-hidden>この要素は読み上げられません</div>

3. 「タブ」など HTML タグにない意味を要素に与えたい

<div role="tablist">
  <input name="selectedTab" type="radio" role="tab">タブ１</input>
  <input name="selectedTab" type="radio" role="tab">タブ２</input>
  <input name="selectedTab" type="radio" role="tab">タブ３</input>
</div>

role 属性や aria-* 属性を規定する W3C 勧告

WAIウェイ-ARIAアリア

WAI-ARIA

WAI-ARIA のベストプラクティスは
可能な限り WAI-ARIA を使わないこと

WAI-ARIA が規定する role （一部）

WAI-ARIA が規定する aria 属性（一部）

覚えきれません

• コンポーネントライブラリを選ぶ
• メジャーどころだけ覚える

なるべく使わない方が良いものなので
必死に覚えなくても良いと思います。個人的には。

視覚障がい者を意識した Web コンテンツ

こんなときどうしよう

• ボット対策したい
  （利用者がボットではなくヒトであることを確認したい）

ボット対策

CAPTCHA （画像認証）

歪んだ文字画像を表示して文字に起こさせることで
利用者が人間であることを確認するツール

画像の代わりに音声を文字に起こす CAPTCHA もある

画像だけの CAPTCHA は視覚障がい者の大敵

ボット対策

No CAPTCHA reCAPTCHA

チェックボックスをクリックするだけで
利用者が人間であることを確認するツール

マウスの動きなどから人間か機械かを判断するらしい
画像／音声 CAPTCHA もオプションとして提供される

アクセシビリティチェックツール

miChecker （エムアイチェッカー）

JIS X 8341-3:2016 (== WCAG 2.0) に基づく
ウェブアクセシビリティ対応の取組を支援するために
総務省が開発

インクルーシブデザインについて

↑ とても読みやすいアクセシビリティガイドラインになっていてオススメ

参考文献